<template>
	<view class="header-tab">
		<uni-nav-bar title="See Wow福利券" left-icon="left" status-bar background-color="transparent" :border="false"  @clickLeft="$navTo('',{}, 'navigateBack')"></uni-nav-bar>	
	</view>
	<view class="clear-float"></view>
	<view class="reward-wrapper">
		<radio-group @change="radioChange" v-if="rewardList.data.length >0">
		  <view class="can-use" v-for="(item, index) in rewardList.data" :key="item.reward_no">
			  <view v-if="item.status == 4||(item.activity_type ==2 && item.activity_ids.indexOf(activityId) == -1)"></view>
			  <view class="reward-item" v-else @click="selectReward(index)" >
			  	<view class="left-box" >
			  		<view class="status-tag">{{item.type ==1 ? "优惠券" : "折扣券"}}</view>
			  		<view class="discount-box">
			  			<p v-if="item.type ==1" >¥<span class="discount-num">{{item.amount}}</span></p>
			  			<p v-if="item.type ==2" ><span class="discount-num">{{item.discount/10}}</span>折</p>
			  			<p class="discount-text">{{item.activity_type ==1 ? "全场通用" : "专属优惠"}}</p>
			  		</view>
			  	</view>
			  	<view class="right-box">
			  		<p class="title">{{item.title}}</p>
			  		<p class="sub-title">{{item.sub_title}}</p>
			  		<p class="time">{{item.end_time=="2099-12-31 23:59:59" ? "长期有效": "有效期至"+ item.end_time}}</p>
			          <label class="radio check-radio">
			          	<radio :value="item.reward_no"  name ="selectRadio" color="#00CAC0" style="transform:scale(0.7)" borderColor="#00CAC0"     :checked="item.isCheck"/>
			          </label>
			  	</view>
			  </view>
		  </view>
		  <!-- 不可用-->
		  <view class="canot-use" >
			  <view class="canot-use-top" v-if="canot_use"></view>
			  <view v-for="(item, index) in rewardList.data" :key="item.reward_no">
				  <view class="reward-item-default" v-if="item.status == 4||(item.activity_type ==2 && item.activity_ids.indexOf(activityId) == -1)" >
				  	<view class="left-box" >
				  		<view class="status-tag">{{item.type ==1 ? "优惠券" : "折扣券"}}</view>
				  		<view class="discount-box">
				  			<p v-if="item.type ==1" >¥<span class="discount-num">{{item.amount}}</span></p>
				  			<p v-if="item.type ==2" ><span class="discount-num">{{item.discount/10}}</span>折</p>
				  			<p class="discount-text">{{item.activity_type ==1 ? "全场通用" : "专属优惠"}}</p>
				  		</view>
				  	</view>
				  	<view class="right-box">
				  		<p class="title">{{item.title}}</p>
				  		<p class="sub-title">{{item.sub_title}}</p>
				  		<p class="time">{{item.end_time=="2099-12-31 23:59:59" ? "长期有效": "有效期至"+ item.end_time}}</p>
				  		<label class="radio check-radio">
				  			<radio :value="item.reward_no"  color="#00CAC0" style="transform:scale(0.7)" disabled/>
				  		</label>
				  		<!-- <view class ="show-reason" v-if="item.activity_ids.indexOf(activityId) == -1" >此活动不可使用</view> -->
				  	</view>
				  </view>
			  </view>

		  </view>

			

			
<!-- 			<view class="reward-item" >
				<view class="left-box" >
					<view class="status-tag">优惠券</view>
					<view class="discount-box">
						<p>¥<span class="discount-num">5</span></p>
						<p class="discount-text">全场通用</p>
					</view>
				</view>
				<view class="right-box">
					<p class="title">新人5元抵扣券最长到</p>
					<p class="sub-title">享受专属商户优惠最长</p>
					<p class="time">有效期至2025.1.16</p>
	                <label class="radio check-radio">
	                	<radio value="3"  color="#00CAC0" style="transform:scale(0.7)" borderColor="#00CAC0"/>
	                </label>
				</view>
			</view> -->
		</radio-group>
	</view> 

	<modal ref="modal"></modal>
	<fixed-footer v-if="Object.keys(curr_reward).length > 0" >
		<view class="show-box">
			<view class="show-box-text">
				<view v-if ="curr_reward.type ==1" >
					 <span class="discount-show">可抵用</span><span style="font-weight: 400;font-size: 14px;color: #00CAC0;">&nbsp;¥</span><span class="discount-show-num">{{curr_reward.amount}}</span>
				</view>
				<view v-if ="curr_reward.type ==2" >
					<span class="discount-show">可抵用</span><span style="font-weight: 400;font-size: 14px;color: #00CAC0;">&nbsp;¥</span><span class="discount-show-num">{{this.discount_price }}</span>
					<!-- <span class="discount-show">可打</span><span class="discount-show-num">{{curr_reward.discount/10}}</span><span style="font-weight: 400;font-size: 14px;color: #00CAC0;">折</span> -->
				</view>
			</view>
			<button class="discount-show-btn" type="primary"   @click="next">确定</button>
		</view>
	</fixed-footer>
</template>

<script>

	export default {
		components: {
			//orderList,
		},
		data() {
			return {
				nav: [{name: '全部',id: 0},{name: '可领取', id:1},{name: '待使用',id: 2},{name: '已使用',id: 3},{name: '已失效',id: 4}],
				status: 2,
				rewardList: {
					data: [],
					page: 1,
					hasMore: false
				},
				curr_reward:{},
				loadStatus: 'more',
				
				//apply 页面参数
				activityId: 0,
				info: {},
				total_num: 0,
				activityCost: [],
				total_price: 0,
				origin_price: 0,
				discount_price: 0,
				showModal:false,
				canot_use : 0
			}
		},
		computed: {
			tabTop() {
				return uni.getWindowInfo().statusBarHeight + 48 + 'px'
			},
			headerHeight() {
				return uni.getWindowInfo().statusBarHeight + 48 + 'px'
			}
		},
		onLoad(options) {
			// apply 携带到参数
			this.activityId = options.activityId
			const eventChannel = this.getOpenerEventChannel();
			if(Object.keys(eventChannel).length > 0) {
				eventChannel.on('applyInfo', (data) => {
					this.info = data.info;
					this.total_num = data.total_num;
					this.activityCost = data.activityCost;
					this.total_price = data.total_price;
					this.curr_reward = data.reward;
					this.calPrice();
					this.getRewardList();
				})
				//看一下是否有不可用的券
				if (this.rewardList.data.length) {
					for (var i = 0; i< this.rewardList.data.length; i++) {
						item = this.rewardList.data[i];
						if (item.status == 4||(item.activity_type ==2 && item.activity_ids.indexOf(activityId) == -1)){
							this.canot_use = 1;
							break;
						}
					}
				}
			}
		},
		onReachBottom() {
			if (this.rewardList.hasMore) {
				this.loadStatus = 'loading'
				this.rewardList.page += 1
				this.getRewardList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中...',
				mask: true
			})
			this.getRewardList(true)
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 800)
		},
		//回退
		onUnload() {
			if(Object.keys(this.curr_reward).length > 0 && this.curr_reward.type == 1 && (this.curr_reward.amount > this.origin_price) && this.showModal == false ) {
				uni.showModal({
					content: '福利券优惠价格高于商品价格，按照0元计算不再补充溢出金额',
					success: function (res) {
					if (res.confirm) {
						var that = this;
						uni.redirectTo({
							url: '/pages/detail/apply?activityId='+ that.activityId,
							success: (res) => {
								uni.$emit('selectInfo', {
									info: that.info,
									total_num: that.total_num,
									activityCost: that.activityCost,
									reward:that.curr_reward
								})
							}
						})
					}
				}.bind(this)
				});
			}else{
				uni.$emit('selectInfo', {
					info: this.info,
					total_num: this.total_num,
					activityCost: this.activityCost,
					reward:this.curr_reward
				});
			}

		  },
		methods: {
			calPrice() {
				if(Object.keys(this.activityCost).length > 0) {
					this.origin_price = 0;
					var total_price = 0;
					var i;
					var priceMin = 0;
					for ( i = 0; i< this.activityCost.length; i++) {
						var  item = this.activityCost[i]
						if (item.active) {
							var price = Number(item.price);
							total_price +=  price * item.num;
							this.origin_price += price * item.num;
							if ((priceMin > 0 && price < priceMin) || priceMin == 0) {
								priceMin = price;
							}
						}
					}
					if(Object.keys(this.curr_reward).length > 0) {
						if(this.curr_reward.type == 1) {
							this.discount_price = total_price < this.curr_reward.amount ? total_price : this.curr_reward.amount;
							this.discount_price = this.changeNumber(this.discount_price);
							total_price =  total_price < this.curr_reward.amount ? 0 : (total_price - this.curr_reward.amount)
						}else{
							//this.discount_price  =  (total_price * (100 - this.curr_reward.discount))/100;
							//this.discount_price = this.discount_price.toFixed(2);
							//total_price = (total_price * this.curr_reward.discount)/100;
							//2.0版本-折扣价只针对最便宜的一份折扣
							this.discount_price  =  (priceMin * (100 - this.curr_reward.discount))/100;
							this.discount_price  = this.changeNumber(this.discount_price);
							total_price          = total_price - this.discount_price;
							
						}
					}

					this.total_price =  this.changeNumber(total_price);
				}
			},
			changeNumber (num){
				return Math.round(num * 100) / 100;
			},
			chcekRadio ($event) {
			   let _this = this;
			   let objVal = _this.myData[$event.target.name];
			   window.setTimeout(() => {
				if (!!objVal && objVal == $event.target.value) {
			   $event.target.checked = false
			   _this.myData[$event.target.name] = ''
				}
			   }, 0);
			},
			 selectReward(index) {
				 var obj = this.rewardList.data[index];
				 if (obj.isCheck) {
					 this.rewardList.data[index].isCheck = false; 
					 this.curr_reward = {};
				 }else{
					//所有取消选中
					for (var i =0; i< this.rewardList.data.length; i++){
						if (index == i) {
							this.rewardList.data[i].isCheck = true;
							this.curr_reward = this.rewardList.data[index];
						}else{
							this.rewardList.data[i].isCheck = false;
						}
					}
				 }
				 this.calPrice();
			    },
			//回掉
            next() {
				if(Object.keys(this.curr_reward).length > 0 && this.curr_reward.type == 1 && this.curr_reward.amount > this.origin_price ) {
					uni.showModal({
						content: '福利券优惠价格高于商品价格，按照0元计算不再补充溢出金额',
						success: function (res) {
							this.showModal = true;
							if (res.confirm) {
								var that = this;
								uni.redirectTo({
									url: '/pages/detail/apply?activityId='+ that.activityId,
									success: (res) => {
										uni.$emit('selectInfo', {
											info: that.info,
											total_num: that.total_num,
											activityCost: that.activityCost,
											reward:that.curr_reward
										})
									}
								})
							} else if (res.cancel) {
								
							}
						}.bind(this)
					});
				}else {
					uni.redirectTo({
						url: '/pages/detail/apply?activityId='+ this.activityId,
						success: (res) => {
							uni.$emit('selectInfo', {
								info: this.info,
								total_num: this.total_num,
								activityCost: this.activityCost,
								reward:this.curr_reward
							})
						}
					})
				}
			},
			// 获取订单列表
			async getRewardList(refresh = false) {
				const res = await this.$request.get('/api/user/reward_lists',{
					status: this.status,
					page: this.rewardList.page
				},{ load: false })
				if (res.code == 200) {
					this.loadStatus = 'more'
					const list = res.data?.lists || []
					this.rewardList.hasMore = res.data.has_more_page
					if (refresh) {
						this.rewardList.data = list
						this.rewardList.page = 1
					} else {
						this.rewardList.data = this.rewardList.data.concat(list)
					}
					if(Object.keys(this.curr_reward).length > 0 && this.rewardList.data.length > 0) {
						for (var i = 0; i < this.rewardList.data.length; i++) {
							if (this.rewardList.data[i].reward_no == this.curr_reward.reward_no) {
								this.rewardList.data[i].isCheck = true;
								this.curr_reward = this.rewardList.data[i];
								break;
							}
						}
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab-nav {
		// background-color: #fff;
		position: sticky;
		left: 0;
		top: v-bind(tabTop);
		right: 0;
		z-index: 2;
	}
	.header-tab {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		//background: linear-gradient(to right, #CDE0F8, #C3F0F0, #DFF8F0);
		z-index: 2;
		
	}
	.clear-float {
		height: v-bind(headerHeight);
	}
	.reward-wrapper {
		padding: 30rpx;
	}
	.reward-item {
		width: 680rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-bottom:16rpx;
		
		.left-box{
			display: block;
			position: relative;
			width: 200rpx;
			height: 200rpx;
			float: left;
			overflow: hidden;
			background: #EBFBFA;
			border-radius: 24rpx 0px 0px 24rpx;
			.status-tag{
				width: 124rpx;
				height: 42rpx;
				background: linear-gradient( 90deg, #BBF8F5 0%, #EBFBFA 100%);
				border-radius: 24px 0px 8px 0px;
				font-weight: 400;
				font-size: 12px;
				color: #02ACAF;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.discount-box{
				color:#00CAC0;
				text-align: center;
				width: 100rpx;
				height: 100rpx;
				margin: auto;
				margin-top:28rpx;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 24rpx;
				.discount-num{
					font-weight: 500;
					font-size: 28px;
					line-height: 38rpx;
					font-style: normal;
					text-transform: none;
				}
				.discount-text{
					padding-top:16rpx;
				}
				
			}
		}
		.right-box {
			position: relative;
			width: 480rpx;
			height: 200rpx;
			float: left;
			.title {
				font-weight: 500;
				font-size: 14px;
				color: #262626;
				line-height: 50rpx;
				padding-left: 30rpx;
				padding-top: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none
			}
			.sub-title {
				font-weight: 400;
				font-size: 13px;
				color: #262626;
				line-height: 40rpx;
				text-align: left;
				padding-left: 30rpx;
				font-style: normal;
				text-transform: none;
			}
			.time {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-weight: 400;
				font-size: 13px;
				color: #7B7B7B;
				line-height: 15px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.btn{
				position: absolute;
				top:72rpx;
				right:24rpx;
				font-size: 12px;
				text-align: center;
				color: #FFFFFF;
				width: 64px;
				height: 27px;
				line-height:27px;
				background: linear-gradient( 185deg, #F1E0FF 0%, #4FE3D1 30%, #28D6D6 45%, #08C0CC 92%);
				border-radius: 35px 35px 35px 35px;
			}
			.goto-btn{
				position: absolute;
				width: 64px;
				height: 27px;
				line-height: 27px;
				text-align: center;
				background: #FFFFFF;
				border-radius: 41px 41px 41px 41px;
				border: 1px solid #00CAC0;
				color:#00CAC0;
				top:72rpx;
				right:24rpx ;
				font-size: 12px;
			}
		}
	}
	
	.reward-item-default {
		width: 680rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-bottom:16rpx;
		
		.left-box{
			display: block;
			position: relative;
			width: 200rpx;
			height: 200rpx;
			float: left;
			overflow: hidden;
			background: #EEEEEE;
			color: #999999;
			border-radius: 24rpx 0px 0px 24rpx;
			.status-tag{
				width: 124rpx;
				height: 42rpx;
				background: linear-gradient( 90deg, #DADADA 0%, #EEEEEE 100%);
				border-radius: 24rpx 0px 0px 0px;
				font-weight: 400;
				font-size: 12px;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.discount-box{
				text-align: center;
				width: 100rpx;
				height: 100rpx;
				margin: auto;
				margin-top:28rpx;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 24rpx;
				.discount-num{
					font-weight: 500;
					font-size: 56rpx;
					line-height: 38rpx;
					font-style: normal;
					text-transform: none;
				}
				.discount-text{
					padding-top:16rpx;
				}
				
			}
		}
		.right-box {
			position: relative;
			width: 480rpx;
			height: 200rpx;
			float: left;
			color: #999999;
			.show-reason{
				position: absolute;
				font-weight: 400;
				font-size: 13px;
				color: #7B7B7B ;
				line-height: 40rpx;
				right:20rpx;
				top:20rpx;
			}
			.title {
				font-weight: 500;
				font-size: 14px;
				color: #7B7B7B ;
				line-height: 40rpx;
				padding-left: 30rpx;
				padding-top: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none
			}
			.sub-title {
				font-weight: 400;
				font-size: 13px;
				color: #7B7B7B ;
				line-height: 40rpx;
				text-align: left;
				padding-left: 30rpx;
				font-style: normal;
				text-transform: none;
			}
			.time {
				padding-left: 30rpx;
				padding-top: 40rpx;
				font-weight: 400;
				font-size: 13px;
				color: #999999;
				line-height: 15px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.btn{
				position: absolute;
				width: 64px;
				height: 27px;
				line-height: 27px;
				text-align: center;
				background: #FFFFFF;
				border-radius: 41px 41px 41px 41px;
				border: 1px solid #999999;
				top:72rpx;
				right:24rpx ;
				font-size: 12px;
			}
		}
	}
	.empty-status{
		width: 234rpx;
		height: 260rpx;
		margin:  auto;
		margin-top:300rpx;
		.img {
			width: 234rpx;
			height: 190rpx;
		}
		.note{
			width: 234rpx;
			height: 30rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 30rpx;
			text-align: center;
			font-style: normal;
			text-transform: none
		}
	}
	.check-radio{
		position: absolute;
		top:72rpx;
		right:50rpx ;
	}
	.show-box{
		width: 100%;
		height: 100%;
	}
	.discount-show{
		font-weight: 400;
		font-size: 28rpx;
		color: #7B7B7B;
	
		text-align: right;
		font-style: normal;
		text-transform: none
	}
	.discount-show-num{
		font-weight: 400;
		font-size: 40rpx;
		color: #00CAC0;

		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.discount-show-btn{
		position: absolute;
		top:10rpx;
		right:36rpx;
		width: 236rpx;
		height: 96rpx;
		background: linear-gradient( 186deg, #F1E0FF 0%, #4FE3D1 23%, #28D6D6 47%, #08C0CC 83%);
		border-radius: 35px 35px 35px 35px;
	}
	.canot-use-top{
		width: 680rpx;
		height: 36rpx;
		margin: auto;
		background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/x5j_file/2025-04-16/174479869967ff83eb0bb62.png);
		background-size: 100% 100%; 
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>